<template>
  <div>
    <UseBreadcrumb>
      <el-breadcrumb-item v-for="item of ['数据统计','数据报表']" :key="item">
        {{item}}
      </el-breadcrumb-item>
    </UseBreadcrumb>
    <el-card class="box-card">
      <!-- echarts图表区域 -->
  <div id="main" style="width: 600px;height:400px;"></div>
</el-card>
  </div>
</template>

<script>
import UseBreadcrumb from '@/common_components/UseBreadcrumb'
import * as echarts from 'echarts'
import _ from 'lodash'
  export default {
    data() {
      return {
        //需要合并的选项
         option : {
            title: {
                text: '用户来源'
            },
            tooltip: {
              trigger:'axis',
              axisPointer:{
                type:'cross',
                label:{
                  backgroundColor:'#E9EEF3'
                }
              }
            },
            grid:{
              left:'3%',
              right:'4%',
              bottom:'3%',
              containLabel:true
            },
            xAxis:[{
                boundaryGap:false
            }] ,
            yAxis: [{
              type:'value'
            }],
        },
        reportOption:{}
      }
    },
    mounted() {
      let myChart = echarts.init(document.getElementById('main'));
      this.getReportsList().then(()=>{
        myChart.setOption(this.reportOption)
      })
      
      
    },
    methods: {
      //获取图表数据
      async getReportsList() {
        let {data:{data:res,meta}} = await this.$api.getReportsData()
        if (meta.status === 200) {
          //合并数据
         this.reportOption = _.merge(res,this.option)
        }
      }
    },
    components:{
      UseBreadcrumb
    }
  }
</script>

<style lang="less" scoped>

</style>